<template>
  <div class="classDetail">
    <div
      class="detail-head"
      :style="{backgroundImage: 'url(' + classinfo.classImg + ')', backgroundSize:'100% 250%', backgroundRepeat: 'no-repeat',backgroundPosition:'center'}"
    ></div>
    <div class="bgdec">
      <div class="titlewrapper">
        <div class="class-title">{{classinfo.className}}</div>
        <div class="otherwrapper">
          <div class="teacher"
            :style="{backgroundImage: 'url(' + classinfo.teacherIcon + ')', backgroundSize:'100%', backgroundRepeat: 'no-repeat',backgroundPosition:'center'}"></div>
          <div class="name">{{classinfo.teacherName}}</div>
          <div class="degree">级别： {{classinfo.classLevel}}</div>
          <div class="time">时长： {{classinfo.classTime}}分钟</div>
          <div class="people">学习人数： {{classinfo.studynum}}</div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="tab">
        <threetab :classinfo="classinfo" :showchapter="showchapter" :laststudy="laststudy" :ispay="isPay"></threetab>
      </div>
      <div class="aside">
        <div v-if="isPay || !this.classinfo.getting">
          <span v-if="laststudy">上次学到第{{laststudy}}节</span>
          <div class="btn" @click="keepstudy">{{laststudy?'继续学习':'开始学习'}}</div>
        </div>
        <div v-if='!isPay && classinfo.getting' class="pay">
          <span class="iconfont icon-jinbi coin"></span>
          <span class="value">{{classinfo.classValue}}</span>
          <div class="btn" @click="topayClass">购买课程</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import threetab from '@/components/threetab.vue'
import axios from 'axios'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'classDetail',
  data () {
    return {
      showchapter: true,
      classinfo: {},
      laststudy: '',
      isPay: false
    }
  },
  inject: ['reload'],
  computed:{
    ...mapState({
      memberNo: 'memberNo',
      current: 'current',
      coin: 'coin'
    }),
  },
  components: {
    threetab
  },
  methods: {
    ...mapActions(['isLogin']),
    getChapterInfo () {
      let classNo = this.$route.query.classNo
      let studynum = this.$route.query.study
      this.common.sendajax(classNo).then((data) => {
        this.classinfo = data
        this.classinfo.studynum = studynum
        console.log(this.classinfo)
      })
    },
    getChapterSpeed () {
      let classNo = this.$route.query.classNo
      let userId = this.memberNo
      let path = this.ports.learning.getLearningSpeed + '?classNo=' + classNo + '&user=' + userId
      let that = this
      this.http.get(path, res => {
        if (res.status === 200) {
          let data = res.data.result
          if (data.code === 200) {
            if(data.msg.studySpeed) {
              that.laststudy = data.msg.studySpeed
            } else {
              if (that.classinfo.getting === 1) {
                that.isPay = data.msg.studySpeed === 0 ? true : false
              } else {
                that.laststudy = 0
              }
            }
            console.log("进度",that.laststudy)
          }
        } else {
          return 'error'
        }
      })
    },
    keepstudy () {
      let cid
      if (this.laststudy) {
        for (let item of this.classinfo.content) {
          if(item.cid === this.laststudy) {
            cid = item.chaptersNo
          }
        }
        let routeData = this.$router.resolve({
          path: '/learning',
          query: { 
            classNo: this.$route.query.classNo,
            chapterId: cid 
          },
        });
        window.open(routeData.href, '_blank');
      } else {
        let classNo = this.$route.query.classNo
        let path = this.ports.classDetail.getFirstChapter + '?classNo='+ classNo
        this.http.get(path, res=>{
          console.log(res)
          if(res.status == 200) {
            if(res.data.result.code == 200) {
              cid = res.data.result.msg.chaptersNo
              let routeData = this.$router.resolve({
                path: '/learning',
                query: { 
                  classNo: this.$route.query.classNo,
                  chapterId: cid 
                },
              });
              window.open(routeData.href, '_blank');
            }
          }
        })
      }
      
    },
    // 购买课程
    topayClass () {
      let studyCoin = this.classinfo.classValue
      let memberCoin = this.coin - studyCoin
      if (this.coin >= studyCoin) {
        this.$confirm(`确定花费${studyCoin}金币购买本课程`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
        }).then(() => {
          let now = new Date().toLocaleDateString()
          let data = {
            memberNo: this.memberNo,
            classNo: this.classinfo.classNo,
            studySpeed: 0,
            studyTime: 0,
            studyCoin,
            buyTime: now,
            studyLevel: this.classinfo.classLevel,
            memberCoin
          }
          this.http.post(this.ports.classDetail.topayClass, data, res => {
            if(res.status === 200 && res.data.code === 200) {
              this.$message({
                type: 'info',
                message: '购买成功'
              })
              this.reload()
            } else {
              this.$message({
                type: 'info',
                message: '购买失败，请稍后重试'
              }) 
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消购买'
          })        
        })
      } else {
        this.$confirm('金币不足，购买失败', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
      }
      
    }
  },
  mounted () {
    this.getChapterInfo()
    console.log(this.current)
    this.isLogin().then(()=>{
      console.log('获得进度')
      this.getChapterSpeed()
    })
  },
  watch: {
    '$route': function () {
      this.getChapterInfo()
      if(this.current!==0){
        this.getChapterSpeed()
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.common {
  margin: 0 auto;
  padding: 0 20px;
}
.classDetail {
  color: red;
  overflow-x: hidden;
}
.detail-head {
  width: 100%;
  height: 200px;
  position: relative;
  padding: 1px;
  overflow: hidden;
}
.detail-head:after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  background: inherit;
  z-index: 2;
  filter: blur(10px);
}
.bgdec {
  width: 100%;
  height: 202px;
  background-image: linear-gradient(
    to right,
    rgba(28, 31, 33, 0.9),
    rgba(28, 31, 33, 0)
  );
  z-index: 3;
  position: absolute;
  left: 0;
  top: 1.2rem;
}
.titlewrapper {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
}
.otherwrapper {
  width: 550px;
  height: 80px;
  font-size: 14px;
  color: #fff;
  line-height: 80px;
  display: flex;
  justify-content: space-between;
}
.class-title {
  margin: 8px 0;
  line-height: 48px;
  font-size: 32px;
  color: #fff;
  text-align: left;
}
.teacherwrapper {
  width: 150px;
  margin-right: 1rem;
}
.teacher {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.name {
  width: auto;
  font-weight: 700;
  margin-left: -30px;
}
.container {
  width: 1000px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.tab {
  width: 800px;
  height: auto;
  padding:30px 0;
}
.aside {
  width: 140px;
  height: 200px;
  padding: 24px 32px 32px;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.1);
  border-radius: 12px;
  margin-top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span{
    font-size: 16px;
    color: #2c3e50;
  }
}
.btn {
  width: 70px;
  padding: 11px 32px;
  border-radius: 24px;
  background: #f20d0d;
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
}
.pay{
  text-align: center;
  .coin{
    color: #f2c80d;
    font-size: 40px;
    font-weight: 600;
  }
  .value{
    color: #f2c80d;
    font-size: 30px;
    font-weight: 400;
  }
  .btn{
    margin-top: 10px;
  }
}

</style>
